<template>
    <div class="tableTree" ref="rtableTree" v-if="isRoot">
        <div class="tableTree_tr" v-for="item in data">
            <div class="tableTree_tr_cell">{{ item.name }}</div>
            <template v-if="item?.children">
                <tableTree :data="item.children" :isRoot="false"></tableTree>
            </template>
        </div>
    </div>
    <template v-else>
        <div class="tableTree_tr_cell tableTree_tr_cellChilren">
            <template v-for="item in data">
                <div class="tableTree_tr_cell" :class="{'tableTree_tr_cell_children':item?.children}">
                    <div class="tableTree_tr_cell_children_div">
                        {{ item.name }}
                    </div>
                    <tableTree :data="item.children" v-if="item?.children" :isRoot="false" class="cc"></tableTree>
                </div>
            </template>
        </div>
    </template>
</template>

<script setup>
import { ref, defineProps, onMounted, render, h, unref } from 'vue';
const { data, isRoot, level } = defineProps({
    data: {
        default: () => [],
        type: Array,
    },
    isRoot: {
        default: () => true,
        type: Boolean
    }
});
</script>

<style lang="less">
.tableTree {
    margin: 40px;
}

.tableTree_tr+.tableTree_tr {
    margin-top: 20px;
}

.tableTree_tr {
    display: flex;

    .tableTree_tr_cell {
        width: 140px;
        min-height: 32px;
        box-shadow: 0px 0px 5px #ccc;
        border-radius: 5px;
        text-align: center;
        line-height: 32px;
    }

    .tableTree_tr_cell+.tableTree_tr_cell {
        margin-left: 10px;
    }

    .tableTree_tr_cellChilren {
        .tableTree_tr_cell {
            margin: 0px;
        }

        .tableTree_tr_cell+.tableTree_tr_cell {
            margin-top: 10px;
        }
    }
}

.tableTree_tr_cell_children {
    display: inline-flex;
    min-width:140px;
    .tableTree_tr_cell_children_div{
        min-width: 140px;
        height: auto;
    }
    .cc{
        margin-left: 10px !important;
    }
}
</style>